<template>
  <main class="category-page">
    <MsnHeader />
    <div class="page-content">
      <!-- 移动端导航按钮 -->
      <button class="mobile-sidebar-toggle hidden-desktop" @click="toggleMobileSidebar">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3 12H21M3 6H21M3 18H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      
      <!-- 左侧分类导航 -->
      <aside class="left-sidebar" :class="{ 'mobile-open': showMobileSidebar }">
        <div class="sidebar-section">
          <h3 class="sidebar-title">商品分类</h3>
          <div class="category-list">
            <div 
              v-for="category in categories" 
              :key="category.id"
              :class="['category-item', { 'active': currentCategoryId === category.id }]"
              @click="switchCategory(category.id)"
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12 6V12L16 16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <span class="category-name">{{ category.name }}</span>
            </div>
          </div>
        </div>
      </aside>
      
      <!-- 主内容区 -->
      <main class="main-content">
        <!-- 面包屑导航 -->
        <nav class="breadcrumb" aria-label="面包屑">
          <ol>
            <li><a href="/">首页</a></li>
            <li><span aria-current="page">{{ currentCategory.name || '全部分类' }}</span></li>
          </ol>
        </nav>
        
        <!-- 分类头部 -->
        <div class="category-header">
          <h1 class="category-title">{{ currentCategory.name || '全部分类' }}</h1>
          <p class="category-description">{{ currentCategory.description || '探索丰富多样的优质商品' }}</p>
        </div>
        
        <!-- 分类筛选 -->
        <div class="category-filter">
          <div class="filter-section">
            <h3 class="filter-title">子分类</h3>
            <div class="filter-options">
              <button 
                v-for="subcat in currentCategory.subcategories || []" 
                :key="subcat.id"
                :class="['filter-option', { 'active': selectedSubcategory === subcat.id }]"
                @click="selectSubcategory(subcat.id)"
              >
                {{ subcat.name }}
              </button>
            </div>
          </div>
          
          <div class="filter-section">
            <h3 class="filter-title">排序方式</h3>
            <div class="filter-options">
              <button 
                v-for="sort in sortOptions" 
                :key="sort.value"
                :class="['filter-option', { 'active': currentSort === sort.value }]"
                @click="changeSort(sort.value)"
              >
                {{ sort.label }}
              </button>
            </div>
          </div>
          
          <div class="filter-section">
            <h3 class="filter-title">品牌</h3>
            <div class="filter-options">
              <button 
                v-for="brand in brands" 
                :key="brand.id"
                :class="['filter-option', { 'active': selectedBrands.includes(brand.id) }]"
                @click="toggleBrand(brand.id)"
              >
                {{ brand.name }}
              </button>
            </div>
          </div>
        </div>
        
        <!-- 商品列表 -->
        <div class="product-grid">
          <ProductCard 
            v-for="product in filteredProducts" 
            :key="product.id" 
            :product="product" 
          />
        </div>
        
        <!-- 加载更多 -->
        <div v-if="filteredProducts.length > 0" class="load-more">
          <button class="load-more-btn" @click="loadMore">加载更多</button>
        </div>
        
        <!-- 无商品时显示 -->
        <div v-else class="no-products">
          <svg width="80" height="80" viewBox="0 0 24 24" fill="none" stroke="#ccc" xmlns="http://www.w3.org/2000/svg">
            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <polyline points="3.27 6.96 12 12.01 20.73 6.96" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <line x1="12" y1="22.08" x2="12" y2="12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <p>暂无相关商品</p>
        </div>
      </main>
    </div>
  </main>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import MsnHeader from '../components/MsnHeader.vue';
import ProductCard from '../components/ProductCard.vue';

const route = useRoute();

// 移动端侧边栏控制
const showMobileSidebar = ref(false);

// 分类数据
const categories = ref([
  {
    id: 1,
    name: '数码家电',
    description: '最新科技产品，包括手机、电脑、家用电器等',
    subcategories: [
      { id: 101, name: '手机通讯' },
      { id: 102, name: '电脑办公' },
      { id: 103, name: '数码配件' },
      { id: 104, name: '家用电器' },
      { id: 105, name: '厨房电器' }
    ]
  },
  {
    id: 2,
    name: '服饰鞋包',
    description: '时尚潮流服饰，舒适鞋履，精致箱包',
    subcategories: [
      { id: 201, name: '男装' },
      { id: 202, name: '女装' },
      { id: 203, name: '童装' },
      { id: 204, name: '鞋靴' },
      { id: 205, name: '箱包' },
      { id: 206, name: '配饰' }
    ]
  },
  {
    id: 3,
    name: '家居家装',
    description: '打造舒适家居环境，品质生活从家开始',
    subcategories: [
      { id: 301, name: '家具' },
      { id: 302, name: '家纺' },
      { id: 303, name: '家居日用' },
      { id: 304, name: '厨具' },
      { id: 305, name: '家装建材' }
    ]
  },
  {
    id: 4,
    name: '美妆个护',
    description: '焕发美丽光彩，呵护健康生活',
    subcategories: [
      { id: 401, name: '面部护理' },
      { id: 402, name: '彩妆' },
      { id: 403, name: '身体护理' },
      { id: 404, name: '香水香氛' },
      { id: 405, name: '口腔护理' }
    ]
  },
  {
    id: 5,
    name: '母婴玩具',
    description: '给宝宝最好的呵护，陪伴快乐成长',
    subcategories: [
      { id: 501, name: '奶粉辅食' },
      { id: 502, name: '尿裤湿巾' },
      { id: 503, name: '喂养用品' },
      { id: 504, name: '婴儿洗护' },
      { id: 505, name: '玩具乐器' }
    ]
  },
  {
    id: 6,
    name: '食品生鲜',
    description: '新鲜食材，美味零食，健康饮食',
    subcategories: [
      { id: 601, name: '休闲零食' },
      { id: 602, name: '酒水饮料' },
      { id: 603, name: '粮油调味' },
      { id: 604, name: '生鲜果蔬' },
      { id: 605, name: '乳制品' }
    ]
  },
  {
    id: 7,
    name: '运动户外',
    description: '运动装备，户外用品，健康生活方式',
    subcategories: [
      { id: 701, name: '运动服饰' },
      { id: 702, name: '运动鞋' },
      { id: 703, name: '户外装备' },
      { id: 704, name: '健身器材' },
      { id: 705, name: '体育用品' }
    ]
  },
  {
    id: 8,
    name: '汽车用品',
    description: '汽车配件，装饰用品，驾驶安全',
    subcategories: [
      { id: 801, name: '汽车装饰' },
      { id: 802, name: '美容养护' },
      { id: 803, name: '汽车电子' },
      { id: 804, name: '安全应急' },
      { id: 805, name: '轮胎轮毂' }
    ]
  }
]);

// 模拟商品数据
const allProducts = ref([
  // 这里会根据分类筛选商品
  // 实际项目中应该从API获取
]);

// 品牌数据
const brands = ref([
  { id: 1, name: '品牌1' },
  { id: 2, name: '品牌2' },
  { id: 3, name: '品牌3' },
  { id: 4, name: '品牌4' },
  { id: 5, name: '品牌5' }
]);

// 排序选项
const sortOptions = ref([
  { label: '综合排序', value: 'default' },
  { label: '销量优先', value: 'sales' },
  { label: '价格从低到高', value: 'price_asc' },
  { label: '价格从高到低', value: 'price_desc' },
  { label: '最新上架', value: 'newest' }
]);

// 当前选择的分类
const currentCategoryId = ref(route.params.id ? parseInt(route.params.id) : null);
// 当前选择的子分类
const selectedSubcategory = ref(null);
// 当前选择的排序方式
const currentSort = ref('default');
// 已选品牌
const selectedBrands = ref([]);
// 当前显示的商品数量
const displayCount = ref(16);

// 当前分类
const currentCategory = computed(() => {
  if (!currentCategoryId.value) return null;
  return categories.value.find(cat => cat.id === currentCategoryId.value) || null;
});

// 筛选后的商品
const filteredProducts = computed(() => {
  // 实际项目中应该根据筛选条件从API获取商品
  // 这里仅做模拟展示
  let products = [];
  
  // 根据分类ID生成对应的模拟商品
  if (currentCategoryId.value) {
    for (let i = 1; i <= displayCount.value; i++) {
      const baseId = currentCategoryId.value * 1000 + i;
      products.push({
        id: baseId,
        name: `${currentCategory.value.name} 商品 ${i} 优质品质 畅销热卖`,
        imageUrl: `https://picsum.photos/id/${baseId % 100}/300/300`,
        currentPrice: 100 + Math.floor(Math.random() * 900),
        originalPrice: 200 + Math.floor(Math.random() * 1800),
        rating: 4 + Math.random(),
        reviewCount: 100 + Math.floor(Math.random() * 9900),
        sales: 1000 + Math.floor(Math.random() * 99000),
        shopName: `${currentCategory.value.name}旗舰店`,
        shopIcon: `https://picsum.photos/id/${(baseId % 50) + 100}/30/30`,
        categoryId: currentCategoryId.value,
        subcategoryId: selectedSubcategory.value || currentCategory.value.subcategories[0].id,
        brandId: 1 + Math.floor(Math.random() * 5)
      });
    }
  }
  
  // 应用排序
  products.sort((a, b) => {
    switch (currentSort.value) {
      case 'sales':
        return b.sales - a.sales;
      case 'price_asc':
        return a.currentPrice - b.currentPrice;
      case 'price_desc':
        return b.currentPrice - a.currentPrice;
      case 'newest':
        return b.id - a.id;
      default:
        return 0;
    }
  });
  
  // 应用品牌筛选
  if (selectedBrands.value.length > 0) {
    products = products.filter(p => selectedBrands.value.includes(p.brandId));
  }
  
  return products;
});

// 切换分类
const switchCategory = (categoryId) => {
  currentCategoryId.value = categoryId;
  selectedSubcategory.value = null;
  selectedBrands.value = [];
  displayCount.value = 16;
  // 在实际应用中，这里应该更新路由
};

// 选择子分类
const selectSubcategory = (subcategoryId) => {
  selectedSubcategory.value = selectedSubcategory.value === subcategoryId ? null : subcategoryId;
  displayCount.value = 16;
};

// 切换排序方式
const changeSort = (sortValue) => {
  currentSort.value = sortValue;
};

// 切换品牌选择
const toggleBrand = (brandId) => {
  if (selectedBrands.value.includes(brandId)) {
    selectedBrands.value = selectedBrands.value.filter(id => id !== brandId);
  } else {
    selectedBrands.value.push(brandId);
  }
  displayCount.value = 16;
};

// 加载更多
const loadMore = () => {
  displayCount.value += 16;
};

// 切换移动端侧边栏
const toggleMobileSidebar = () => {
  showMobileSidebar.value = !showMobileSidebar.value;
};

// 组件挂载时执行
onMounted(() => {
  // 如果有路由参数，设置当前分类
  if (route.params.id) {
    currentCategoryId.value = parseInt(route.params.id);
  }
});
</script>

<style scoped>
.category-page {
  min-height: 100vh;
  background-color: var(--background-color);
}

/* 移动端侧边栏切换按钮 */
.mobile-sidebar-toggle {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 1001;
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px;
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
}

.mobile-sidebar-toggle:hover {
  background: var(--border-light);
}

/* 页面内容布局 */
.page-content {
  display: flex;
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 24px;
  position: relative;
}

/* 左侧边栏 */
.left-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 24px;
  height: fit-content;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) var(--border-light);
  transition: transform var(--transition-normal);
}

/* 移动端侧边栏 */
@media (max-width: 768px) {
  .left-sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    height: 100vh;
    z-index: 1000;
    background: var(--card-background);
    box-shadow: var(--shadow-xl);
    padding: 24px;
    margin-top: 0;
    border-radius: 0;
  }
  
  .left-sidebar.mobile-open {
    transform: translateX(260px);
  }
}

/* 主内容区 */
.main-content {
  flex: 1;
  min-width: 0;
}

/* 面包屑导航 */
.breadcrumb {
  margin-bottom: 16px;
}

.breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.breadcrumb li + li::before {
  content: ">";
  color: var(--text-muted);
  font-size: 12px;
}

.breadcrumb a {
  color: var(--text-secondary);
  font-size: 14px;
}

.breadcrumb a:hover {
  color: var(--primary-color);
  text-decoration: underline;
}

.breadcrumb span {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

/* 分类头部 */
.category-header {
  margin-bottom: 24px;
  padding: 24px;
  background-color: var(--card-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.category-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.category-header p {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
}

/* 分类筛选 */
.category-filter {
  background-color: var(--card-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  margin-bottom: 24px;
}

.filter-section {
  margin-bottom: 16px;
}

.filter-section:last-child {
  margin-bottom: 0;
}

.filter-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-option {
  padding: 6px 16px;
  border: 1px solid var(--border-color);
  background-color: white;
  border-radius: 20px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.filter-option:hover {
  border-color: #e1251b;
  color: #e1251b;
}

.filter-option.active {
  background-color: #e1251b;
  border-color: #e1251b;
  color: white;
}

/* 商品网格 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

/* 加载更多按钮 */
.load-more {
  text-align: center;
  padding: 24px;
}

.load-more-btn {
  padding: 12px 32px;
  border: 1px solid #e1251b;
  background-color: white;
  color: #e1251b;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.load-more-btn:hover {
  background-color: #e1251b;
  color: white;
}

/* 无商品提示 */
.no-products {
  text-align: center;
  padding: 64px 24px;
  color: var(--text-muted);
}

.no-products svg {
  margin-bottom: 16px;
}

.no-products p {
  font-size: 16px;
  margin: 0;
}

/* 侧边栏样式 */
.sidebar-section {
  background-color: var(--card-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  border: 1px solid var(--border-color);
}

.sidebar-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.category-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.category-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.category-item:hover {
  background-color: #f8f8f8;
  border-color: #e1251b;
}

.category-item.active {
  background-color: #fff1f0;
  border-color: #e1251b;
}

.category-item svg {
  margin-right: 12px;
  color: #e1251b;
  flex-shrink: 0;
}

.category-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.category-item.active .category-name {
  color: #e1251b;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .page-content {
    gap: 20px;
    padding: 20px;
  }
  
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .left-sidebar {
    width: 240px;
  }
}

@media (max-width: 768px) {
  .page-content {
    gap: 16px;
    padding: 16px;
  }
  
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  
  .category-header {
    padding: 16px;
  }
  
  .category-header h1 {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .page-content {
    padding: 12px;
  }
  
  .product-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .category-header h1 {
    font-size: 20px;
  }
  
  .filter-options {
    justify-content: center;
  }
}
</style>